<template>
  <li 
    :class="['nav-item', { active: index === currentIndex}]"
    :style="{ width: 100 / navLen + '%'}"
    @click="changeItem(index)"
  >
    {{ itemData.itemTitle }}
  </li>
</template>

<script>
export default {
    name: 'tab-nav-item',
    props: ['itemData', 'navLen', 'index', 'currentIndex'],
    methods: {
        changeItem(index) {
            this.$emit('changeItem', index);
        }
    }
}
</script>

<style>
.nav-item{
    float: left;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
.active{
    background-color: #454545;
    color: #fff;
}

</style>
